body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  margin: 0;
  background-color: #f5f5f5;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.input {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

/* 输入框样式 */
input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;
  width: 200px;
  box-sizing: border-box; /* 使输入框大小不随内容改变 */
}

/* 样式化清除按钮 */
.clear-button {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  display: none;
}

.button-container {
  display: flex;
  margin-top: 10px;
  align-items: center;
}

.option-container {
  display: flex;

  .item {
    margin-left: 10px;
  }
}

button {
  padding: 10px 20px;
  background-color: #007bff; /* 背景色 */
  color: #fff; /* 文字颜色 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 按钮颜色变化动画 */
  margin-right: 10px; /* 添加右侧间距 */
}

.close-button {
  margin: 10px;
}

button:hover,
button:hover,
button:hover {
  background-color: #0056b3; /* 悬停时的背景色 */
}

/* 输出容器样式 */
.output {
  /* width: 300px; 
  height: 100px;  */
  overflow: hidden; /* 防止内容溢出 */
  display: flex; /* 使用 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

#character-target-div {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 添加垂直间隔 */
.input {
  margin-bottom: 20px;
}

/* 外部容器样式 */
.download {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  align-items: center; /* 水平居中对齐子元素 */
}

/* button 元素样式 */
.download button {
  padding: 8px 16px; /* 按钮内边距 */
  background-color: #007bff; /* 按钮背景颜色 */
  color: #fff; /* 按钮文字颜色 */
  border: none; /* 去掉按钮边框 */
  border-radius: 4px; /* 圆角 */
  cursor: pointer; /* 鼠标样式为手型 */
  margin-top: 10px; /* 按钮上外边距 */
}

/* button 元素悬停样式 */
.download button:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

/* a 标签样式 */
.download a {
  display: inline-block; /* 让 a 标签表现为块级元素，与 button 类似 */
  margin-top: 5px; /* a 标签上外边距 */
  padding: 6px 12px; /* a 标签内边距，与 button 类似 */
  background-color: #007bff; /* a 标签背景颜色 */
  color: #fff; /* a 标签文字颜色 */
  border: none; /* 去掉边框，与 button 类似 */
  border-radius: 4px; /* 圆角，与 button 类似 */
  cursor: pointer; /* 鼠标样式为手型 */
  text-decoration: none; /* 去掉下划线 */
  font-size: 14px; /* 字体大小 */
}

/* a 标签悬停样式 */
.download a:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

.copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  font-size: 14px;
  color: #999;
}

/* CopyRight */
.copyright a:hover,
.copyright a:link,
.copyright a:visited,
.copyright a:active {
  text-decoration: none;
}

.copyright a:hover {
  color: #055905;
}
